// src/layouts/MainLayout.jsx
import React from 'react';
import { Layout, Menu, theme } from 'antd';
import { Outlet , useNavigate} from 'react-router-dom';
import { topMenuItems, sideMenuItems } from '../configs/MenuConfig.js';
import MessageCenter from "../components/MessageCenter.jsx";
const { Header, Content, Sider } = Layout;

const MainLayout = () => {
    const {
        token: { colorBgContainer, borderRadiusLG },
    } = theme.useToken();
    const navigate = useNavigate();
    return (
        <Layout>
            <Header  style={{ display: 'flex', alignItems: 'left' }}>
                <div style={{ width: '150px', color: 'white', fontWeight: 'bold', fontSize: '18px' }}>
                    WMS系统
                </div>
                <Menu
                    theme="dark"
                    mode="horizontal"
                    // defaultSelectedKeys={['2']}
                    items={topMenuItems}
                    style={{ flex: 1, minWidth: 0 }}
                    onSelect = {(e) => {
                        navigate(`/${e.key}`); // 跳转到对应路径
                    }}
                />
                <MessageCenter></MessageCenter>
            </Header>
            <Layout>
                <Sider width={180} collapsible = {true} theme={"light"} style={{ background: colorBgContainer, height: 'calc(100vh - 64px - 24px)', }} >
                    <Menu
                        mode="inline"
                        defaultSelectedKeys={['1']}
                        defaultOpenKeys={['sub1']}
                        style={{ height: '100%', borderRight: 0, overflowY: 'auto'}}
                        items={sideMenuItems}
                        onSelect = {(e) => {
                            navigate(`/${e.key}`); // 跳转到对应路径
                        }}
                    />
                </Sider>
                <Layout >
                    {/*<Breadcrumb*/}
                    {/*    items={[{ title: 'Home' }, { title: 'List' }, { title: 'App' }]}*/}
                    {/*    style={{ margin: '16px 0' }}*/}
                    {/*/>*/}
                    <Content
                        style={{
                            // padding: 24,
                            height: 'calc(100vh - 64px - 24px - 24px)',
                            minHeight: 280,
                            background: colorBgContainer,
                            borderRadius: borderRadiusLG,
                        }}
                    >
                        <Outlet /> {/* 页面内容注入点 */}
                    </Content>
                </Layout>
            </Layout>
        </Layout>
    );
};

export default MainLayout;
